<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>		  
		<div id="app"> 
		  <h3>
			  <p>输入学员信息</p>
			  <div>
				 姓名：  <input type="text" v-model="form.name"   />
			  </div>
			  <div>
			  	 年龄：  <input type="text" v-model.number="form.age"   />
			  </div>
			  <input type="button" value="保存" v-on:click="saveData" />
		  </h3>
		  
		  <h4>
			  <table>
				  <tr>
					  <td>学号</td>
					  <td>姓名</td>
					  <td>年龄</td>
					  <td>操作</td>
				  </tr>
				  
				  <tr v-for="(item,index) in stuList" v-bind:key="index">
					  <td>{{item.id}}</td>
					  <td>{{item.name}}</td>
					  <td>{{item.age}}</td>
					  <td>
						  <input type="button" value="编辑" v-on:click="updateRow(index)"/>
						  <input type="button" value="删除" v-on:click="removeRow(index)" />
					  </td>
				  </tr>
			  </table>
		 </h4>
			 
		</div>
		
	</body>
	<script src="../js/vue.js"></script>
	
	<script>
		
		const app=new Vue({
			el:"#app",
			// 存放私有数据地址
			data:{
				autoNo:100,
				form: {
					name: undefined,
					age: undefined,
					id:  undefined
				},
				stuList: []
			},
			// 定义方法
			methods: {
				saveData() {
					// 修改
					if(this.form.id) {
						
						const index=this.stuList.findIndex(item=> item.id===this.form.id);
						if(index===-1){
							alert('数据查询不到，不能更新');
							return;
						} 
						 
						const newForm=JSON.parse(JSON.stringify(this.form))
						this.stuList[index]=newForm;
						
					}else {
						//新增
						this.form.id=this.autoNo++
						//clone
						const newForm=JSON.parse(JSON.stringify(this.form))
						this.stuList.push(newForm);
					}
										 
					 
					//清空数据
					this.form.id=undefined
					this.form.name=undefined
					this.form.age=undefined
					
				},
				removeRow(index) {
					this.stuList.splice(index,1);
				},
				updateRow(index) {
					const newForm=JSON.parse(JSON.stringify(this.stuList[index]))
					this.form = newForm;
				}
			}
		});
		
	</script>
</html>